<template>
  <div class="main">
    <!-- 增加机器人按钮 -->
    <div>
      <a-button type="primary" @click="showModal">

        
        增加机器人
      </a-button>
      <a-modal v-model="visible" title="请填写以下内容">
        <template slot="footer">
          <a-button key="back" @click="handleCancel">
            取消
          </a-button>
          <a-button key="submit" type="primary" :loading="loading" @click="add">
            确定
          </a-button>
        </template>
        <p>
          <a-form-item>
            机器人ID<a-input :disabled="false" v-model="addRobot.robot_id" />
            机器人名称<a-input v-model="addRobot.name" />
            是否共享机器人<a-input v-model="addRobot.is_shared" />
          </a-form-item>
        </p>
      </a-modal>
    </div>

    <!-- 内容区 -->
    <div>
      <!-- 机器人信息展示 -->
      <tr class="top">
        <td>机器人ID</td>
        <td>机器人名称</td>
        <td>所属人</td>
        <td>操作</td>
      </tr>
      <tr class="top content" v-for="(item, index) in allrobotdata.list" :key="index">
        <!-- 内容展示 -->
        <td>{{ item.robot_id}}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.user_name }}</td>
        <td class="caozuo">
          <!-- 删除机器人按钮 -->
          <a-popconfirm title="你确定要删除这个机器人吗？" ok-text="Yes" cancel-text="No" @click.native="remove(index)"
            @confirm="confirm" @cancel="cancel">
            <a-button type="danger" size="small">删除</a-button>
          </a-popconfirm>
          <!-- 修改机器人按钮 -->
          <a-button type="primary" size="small" style="margin-left: 5px;" @click="change(index)">
            修改
          </a-button>
          <a-modal v-model="visibletwo" title="修改机器人">
            <template slot="footer">
              <a-button key="back" @click="handleCancel">
                取消
              </a-button>
              <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
                确定
              </a-button>
            </template>
            <p>
              <!-- 机器人ID<a-input :disabled="true" v-model="form.robot_id" /> -->
              机器人名字<a-input v-model="form.name"  :placeholder="allrobotdata.list[aaindex].name"/>
              是否共享机器人<a-input v-model="form.is_shared" />   

            </p>
          </a-modal>


          
          <!-- 增加任务 -->
          <a-button size="small" type="primary" style="margin-left: 5px;" @click="addTask(index)">添加任务</a-button>
          <a-modal v-model="visiblethree" title="添加任务">
            <template slot="footer">
              <a-button key="back" @click="handleCancelthree">
                取消
              </a-button>
              <a-button key="submit" type="primary" :loading="loading" @click="handleOkthree">
                确定
              </a-button>
            </template>
            <p>
              任务名称<a-input v-model="addtaskform.task_name" />
              <a-form-model-item label="重复时间类型">
                <a-select v-model="addtaskform.repeat_time" style="width: 100%;">
                  <a-select-option value="立即发送">
                    立即发送
                  </a-select-option>
                  <a-select-option value="仅发送一次">
                    仅发送一次
                  </a-select-option>
                  <a-select-option value="周重复">
                    周重复
                  </a-select-option>
                  <a-select-option value="spec">
                    spec
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            <div>
              
              <div v-if="addtaskform.repeat_time === '仅发送一次'">
                可选时间框<div>
                  <a-date-picker show-time v-model="addtaskform.detail_time" placeholder="请选择时间" @change="twochange"
                    @ok="onOk" />
                  <br />
                </div>
                
              </div>


              <div v-if="addtaskform.repeat_time === '周重复'">
                <a-form-model-item label="请选择周几发送" prop="type">
                  <a-checkbox-group v-model="forms.type">
                    <a-checkbox value="0" name="type">
                      日
                    </a-checkbox>
                    <a-checkbox value="1" name="type">
                      一
                    </a-checkbox>
                    <a-checkbox value="2" name="type">
                      二
                    </a-checkbox>
                    <a-checkbox value="3" name="type">
                      三
                    </a-checkbox>
                    <a-checkbox value="4" name="type">
                      四
                    </a-checkbox>
                    <a-checkbox value="5" name="type">
                      五
                    </a-checkbox>
                    <a-checkbox value="6" name="type">
                      六
                    </a-checkbox>
                  </a-checkbox-group>
                </a-form-model-item>
                 <a-time-picker v-model="addtaskform.detail_time" valueFormat="string" placeholder="请选择时间"
                  @change="onChange" style="display: none;" />
                <a-time-picker placeholder="请选择时间" @change="onChange" />
              </div>

              <div v-if="addtaskform.repeat_time === 'spec'">
                spec   (详情请参考<a href="https://github.com/robfig/cron">https://github.com/robfig/cron</a>) <a-input v-model="addtaskform.spec" />
              </div>
            </div> 

            是否全体通知<a-radio-group name="radioGroup" :default-value="1" v-model="addtaskform.msg_text.at.isAtAll"
              style="padding-right: 100%;margin: 10px;">
              <a-radio :value="true">
                是
              </a-radio>
              <a-radio :value="false" >
                否
              </a-radio>
            </a-radio-group>
            <div v-if="addtaskform.msg_text.at.isAtAll === false"  >
                通知人员姓名：<a-auto-complete v-model="addtaskform.msg_text.at.atMobiles.name" :data-source="dataSource"
                  style="width: 100%" placeholder="请输入姓名" @search="inputChange" 
                  />

                <br>
              </div>
            通知内容<a-input v-model="addtaskform.msg_text.text.content" />
            </p>
          </a-modal>
        </td>
      </tr>
    </div>
    <!-- 分页器 -->
    <div v-if="isShowPage" >
      <a-pagination v-model="list.page" :total="allrobotdata.total" show-less-items @change="sizeChange" />
    </div>
  </div>
</template>

<script>
import { reqGetAllUserRobot, reqGetRemove, reqGetAdd, reqGetChange, reqCreateTask, reqGetPreson,getPersonName  } from "@/api";
import {_debounce} from '@/utils/fangdou';
import moment from 'moment';
export default {
  data() {
    return {
      isShowPage : true,
      loading: false,
      visible: false,
      visibletwo: false,
      visiblethree: false,
      time: ['立即发送', '仅发送一次', '周重复', 'spec'],
      weeks: '',
      weekmsg: '',
      allrobotdata: [],
      robot_id: "",
      userName: '',
      name: '',
      week: '',
      changename: '',
      aaindex:0,
      forms: {
        type: [],
      },
      Namelist:[],
      list: {
        page: '1',
        pageSize: '10',

      },
      addRobot: {
        robot_id: "",
        name: "",
        is_shared:1
      },
      // 获取机器人ID
      form: {
        robot_id: '',
        name: '',
        is_shared:0
      },

      // 增加任务
      addtaskform: {
        robot_id: '',
        repeat_time: '',
        msg_text: {
          at: {
            atMobiles: [
              {
                atMobile: '',
                name:''
              }
            ],
            isAtAll: '',
          },
          text: {
            content: '',
          },
          msgtype: 'text'
        },
        detail_time: '',
        task_name: '',
        spec: ''
      },

      //模糊查询用户信息
      perpon: {
        name: '',
        mobile: ''
      },

      // 展示模糊查询数据
      value: '',
      dataSource: [''],
    };
  },
  mounted() {
    this.reqGetAllUserRobot();
    const token1 = localStorage.getItem("token");
    console.log(token1);
    if (token1 === "undefined") {
      this.isShowPage = false;
    }
  },

  methods: {
    moment,
    getmsg() {
      reqGetAllUserRobot(this.list).then((res) => {
        this.allrobotdata = res.data;
        console.log(this.allrobotdata.list);
      });
    },
    //分页
    sizeChange(val) {
      this.list.page = val;
      reqGetAllUserRobot(this.detail).then((res) => {
        this.allrobotdata  = res.data;
      });
    },
   // input值改变时触发
   inputChange:_debounce(function(){
     getPersonName(this.addtaskform.msg_text.at.atMobiles.name).then((res)=>{
this.dataSource=res.data.list.map((user)=>{
return user.name;
});
this.addtaskform.msg_text.at.atMobiles=res.data.list.map((user)=>{
return {
  name:user.name,
  atMobile:user.mobile
};
});
        console.log(this.dataSource);
        console.log(this.addtaskform.msg_text.at.atMobiles);
      })
    },300),

    // 时间
    onChange(value, dateString) {
      this.addtaskform.detail_time = dateString;
      // 拼接周重复的字符串
      this.weeks = this.forms.type.join('/')
     
    },
    twochange(value, dateString) {
      this.addtaskform.detail_time = dateString;
      
    },
    onOk(value) {
      console.log('onOk: ', value);
    },


    // 删除机器人模块
    showModal() {
      this.visible = true;
    },
    // 增加机器人
    add(e) {
      this.loading = true;
      setTimeout(() => {
        this.visible = false;
        this.loading = false;
      }, 500);
      reqGetAdd(this.addRobot).then((res) => {
        setTimeout(() => {
          if (res.code == 0) {
            this.getmsg()
            this.$message.success('添加机器人成功');
          } else {
            this.$message.error('添加机器人失败');
          }
        }, 600);
      });
    },
    handleCancel(e) {
      this.visible = false;
    },

    // 删除机器人模块
    // 获取想要删除机器人的ID
    remove(index) {
    console.log(index);
      reqGetAllUserRobot().then((res) => {
        this.robot_id = this.allrobotdata.list[index].robot_id;
        console.log(this.robot_id);
      });
    },
    // 进行确认删除操作
    confirm(e) {
      reqGetRemove({ "robot_ids" : [this.robot_id] }).then((res) => {
        setTimeout(() => {
          if (res.code == 0) {
            this.getmsg()
            this.$message.success('删除机器人成功');
          } else {
            this.$message.error('删除机器人失败');
          }
        }, 600);
      });
    },
    cancel(e) {
      console.log(e.target);
      this.$message.error('已取消删除');
    },


    // 修改机器人模块
    change(index) {
      this.aaindex=index
      console.log(this.aaindex+"5555");
      this.visibletwo = true;
      this.form.robot_id = this.allrobotdata.list[index].robot_id
      console.log(this.form.robot_id);
      // reqGetAllUserRobot().then((res) => {
      //   this.form.robot_id = this.allrobotdata[index].robot_id;
      // });
    },
    handleOk(e) {
      this.loading = true;
      // 修改机器人模块
      reqGetChange(this.form).then((res) => {
        console.log(this.form);
        console.log(res);
        setTimeout(() => {
          if (res.code == 0) {
            this.getmsg()
            this.$message.success('修改机器人成功');
          } else {
            this.$message.error('修改机器人失败');
          }
        }, 600);
      });
      setTimeout(() => {
        this.visibletwo = false;
        this.loading = false;
      }, 500);
    },
    handleCancel(e) {
      this.visibletwo = false;
    },

    // 增加任务
    addTask(index) {
      this.visiblethree = true
      console.log(index);
      // 获取顺序
      reqGetAllUserRobot().then((res) => {
        this.addtaskform.robot_id = this.allrobotdata.list[index].robot_id;
      });
    },
    handleCancelthree() {
      this.visiblethree = false
      this.addtaskform={ robot_id: '',
        repeat_time: '',
        msg_text: {
          at: {
            atMobiles: [
              {
                atMobile: '',
                name:''
              }
            ],
            isAtAll: '',
          },
          text: {
            content: '',
          },
          msgtype: 'text'
        },
        detail_time: '',
        task_name: '',
        spec: ''}
      this.$message.error('取消增加任务');
    },
    handleOkthree() {
      if(this.addtaskform.repeat_time=='周重复'){
        this.addtaskform.repeat_time = this.addtaskform.repeat_time + '/' + this.weeks
      }
      this.visiblethree = false
      // this.addtaskform.repeat_time = this.weekmsg
      console.log(this.addtaskform);
      // 发送添加请求
      reqCreateTask(this.addtaskform).then((res) => {
        this.$message.success('增加任务成功');
        this.weeks='',
        this.addtaskform={ robot_id: '',
        repeat_time: '',
        msg_text: {
          at: {
            atMobiles: [
              {
                atMobile: '',
                name:''
              }
            ],
            isAtAll: '',
          },
          text: {
            content: '',
          },
          msgtype: 'text'
        },
        detail_time: '',
        task_name: '',
        spec: ''}
        console.log(this.addtaskform);
      })
    },

    // 展示模糊查询数据
    onSearch(searchText) {
      console.log(searchText);
      this.dataSource = !searchText ? [] : this.dataSource;
    },
  },
  computed: {
    atMobile() {
      return this.addtaskform.msg_text.at.atMobiles.atMobile
    }
  },

  mounted() {
    // 获取所有机器人列表
    //  console.log(this);
    this.getmsg()
    this.name = localStorage.getItem('name');
  },
};
</script>

<style>
.main {
  width: 100%;
}

.top {
  /* display: flex;
  justify-content: space-around; */
  margin-top: 10px;
  height: 50px;
  line-height: 50px;
  background-color: #eaf4fe;
}

.top td {
  width: 25%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content {
  margin-top: 0px;
  text-align: center;
  background-color: #fff;
}

.content td {
  overflow: hidden;
  justify-content: center;
  width: 25%;
}

.content:hover {
  background-color: #eaf4fe;
}

/* .content:hover {
  background-color: #eaf4fe;
} */

/* .caozuo {
  display: flex;
  flex-wrap: wrap;
  justify-self: center;
} */
</style>
